import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import groupOrderEntryDetailService from "@/modules/groupOrderManagement/groupOrderEntryDetail.service";
import useNavigator from "@/hooks/useNavigator";
import { useStore as useUserStore } from "@/store/user";
import { message, Modal } from "ant-design-vue";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left:["refresh","close"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "续保/终保",
          dataIndex:["is_new","label"],
          align: "center",
          width: "100px",
        },
        {
          title: "被保人姓名",
          dataIndex: "name",
          align: "center",
          width: "150px",
        },
        {
          title: "证件类型",
          dataIndex:["id_type","label"],
          key: "id_type",
          align: "center",
        },
        {
          title: "证件号码",
          dataIndex: "id_no",
          align: "center",
          width: "120px",
        },
        {
          title: "出生日期",
          dataIndex: "birthday",
          align: "center",
          width: "100px",
        },
        {
          title: "性别",
          dataIndex:["sex","label"],
          align: "center",
          width: "80px",
        },
        {
          title: "手机号",
          dataIndex: "mobile",
          align: "center",
          width: "100px",
        },
        {
          title: "所在市",
          dataIndex:["city_id","label"],
          align: "center",
          width: "80px",
        },
        {
          title: "所在区县",
          dataIndex:["area_id","label"],
          align: "center",
          width: "80px",
        },
        {
          title: "所在乡镇/街道",
          dataIndex:["street_id","label"],
          align: "center",
          width: "120px",
        },
        {
          title: "所在村/社区",
          dataIndex:["village_id","label"],
          align: "center",
          width: "100px",
        },
        {
          title: "商保/低保",
          dataIndex: ["people_type","label"],
          align: "center",
          width: "180px",
        },
        {
          title: "生效时间",
          dataIndex: "people_start_date",
          align: "center",
          width: "180px",
        },
        {
          title: "上传时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
      ],
      loading: false,
      searchForm: {
        insure_id_no: {
          type: "input",
          label: "被保人证件号",
          attrs: { placeholder: "请输入被保人证件号" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new groupOrderEntryDetailService({order_no:navigator?.route?.query?.order_no});
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      LTableRef.value.$fetchTableData();
    };
    const deleteRow = (id:string | number)=>{
      Modal.confirm({
        title: "提示",
        content: "确认取消?",
        onOk: () => {
          $service.delete({
            order_no: id,
          }).then((res: any) => {
            LTableRef.value.$fetchTableData();
          });
        },
      });
    }
    return () => (
      <Page>
        <CardWithTitle title="团单录入">
            <LTable
              ref={LTableRef}
              service={$service}
              toolbar={state.toolbar}
              v-model={state}
            >
              <a-table
                bordered={true}
                scroll={{ x: "max-content" }}
                dataSource={state.dataSource}
                columns={state.columns}
                pagination={state.pagination}
                onChange={tableChangeHandler}
                loading={state.loading}
                rowKey="id"
              />
            </LTable>
        </CardWithTitle>
      </Page>
    );
  },
});